<template>
  <div class="">
    <div v-if="data.type == 2" class="avatar-uploader">
      <div class="avatar-box">
        <div class="img-box" v-for="(item, index) in data.imgList" key="index">
          <el-image :src="item" fit="cover" :preview-src-list="data.imgList" :initial-index="index" alt="图片"
            class="avatar"></el-image>
          <el-icon class="btn xs" @click="onDel(index)">
            <Close />
          </el-icon>
        </div>
        <el-upload v-if="data.imgList.length < data.maxCount" class="avatar-uploader" :action="data.action"
          :headers="data.headers" :show-file-list="false" :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <div style="text-align: center;" class="avatar-uploader-icon">
            <el-icon style="margin-top: 30px;">
              <Plus />
            </el-icon>
            <p>上传照片</p>
          </div>
        </el-upload>
      </div>

    </div>
    <el-upload v-if="data.type == 1" class="avatar-uploader" :action="data.action" :headers="data.headers"
      :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
      <img v-if="props.imageUrl || props.img" :src="data.imageUrl || props.img" class="avatar" />
      <div v-else style="text-align: center;" class="avatar-uploader-icon">
        <el-icon style="margin-top: 40px;">
          <Plus />
        </el-icon>
        <p>上传照片</p>
      </div>
    </el-upload>
  </div>
</template>

<script setup>
// 使用规则父组件  最多 <Upload @onChang="onChangImage" :img="img" :max='2' updateMax='2' />
//               最简  <Upload @onChang="onChangImage"  />
//               onChangImage(e){ e//返回的数据 字符串或数组  }
//    img: '',//图片，类型字符串或者数组  'xxxx.png'||['xxx.png','xxx.jpg'] 不传默认字符串
//    max: '', //最大上传数量，多图需要，不传默认3；
//    updateMax:'' //最大上传大小 默认2 单位M 

// "http://192.168.0.103/merchant-shop/madmin/merchantShopDetails/upload"
const emit = defineEmits(['onChang']);
let props = defineProps({
  img: '', //图片，类型字符串或者数组  'xxxx.png'||['xxx.png','xxx.jpg'] 不传默认字符串
  max: '', //最大上传数量，多图需要，不传默认3；
  updateMax: '' //最大上传大小 默认2 单位M 
})
onMounted(() => {
  if (typeof (props.img) == 'object' && props.img != null) {
    var list = [];
    props.img.map(item => {
      if (item) list.push(item);
    })
    data.imgList = list;
    data.type = 2;
    if (props.max) {
      data.maxCount = Number(props.max);
    }
  } else {
    data.imageUrl = props.img;
    data.type = 1;
  }
  if (props.updateMax) {
    data.updateMax = props.updateMax;
  }

  data.headers = {
    sso_appCode: "SYS_MERCHANT",
    sso_token: localStorage.getItem('token')
  }
})
let data = reactive({
  imageUrl: "", //单图
  headers: {}, //请求头
  type: 1, //1单图 2是多图
  action: import.meta.env.VITE_API_BASEURL + "/merchant-shop/madmin/merchantShopDetails/upload", //域名
  imgList: [], //多图
  maxCount: 3,
  updateMax: 2,

})
const onDel = (i) => { //删除
  data.imgList.splice(i, 1);
  emit("onChang", data.imgList);
}
const handleAvatarSuccess = (e) => {
  if (e.data) {
    if (data.type == 2) {
      data.imgList.push(e.data);
      emit("onChang", data.imgList);
    } else {
      data.imageUrl = e.data;
      emit("onChang", data.imageUrl);
    }
  }

}
const beforeAvatarUpload = (e) => {

  if (e.type !== 'image/jpeg' && e.type !== 'image/png') {
    ElMessage.error('上传格式错误!')
    return false
  } else if (e.size / 1024 / 1024 > data.updateMax) {
    ElMessage.error('上传图片不能大于' + data.updateMax + 'MB!')
    return false
  }
  return true
}
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 124px;
  height: 124px;
  display: block;
}
</style>

<style lang="scss" scoped>
.avatar-box {
  display: flex;
  align-items: center;

  .img-box {
    position: relative;

    .btn {
      position: absolute;
      position: absolute;
      z-index: 1;
      font-size: 20px;
      right: 10px;
      top: 10px;
      margin-top: -10px;
      color: #fff;
      z-index: 1;
    }
  }

  .avatar {
    margin-right: 10px;
  }

}

.avatar-uploader .el-upload {
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.04);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.avatar-uploader-icon {
  width: 124px;
  height: 124px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 2px;
  text-align: center;

  p {
    margin: 0;
    margin-top: -10px;
  }
}
</style>
